<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器</title>
  </title>
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <!-- 引入处理时间的第三方库dayjs -->
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.3/dayjs.min.js"></script>
</head>

<body>
  <!--
    过滤器：
      定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
      语法：
          1.注册过滤器：
            全局过滤器：Vue.filter(name,callback) 或 
            局部过滤器：new Vue{filters:{}}
          2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
      备注：
          1.过滤器也可以接收额外参数、多个过滤器也可以串联
          2.并没有改变原本的数据, 是产生新的对应的数据
      -->
  <!-- 准备容器 -->
  <div id="root">
    <h1>显示格式化后的时间</h1>
    <!--计算属性实现-->
    <h2>现在是:{{ formatTime }}</h2>
    <!-- methods方法实现 -->
    <h2>现在是：{{getFormatTime()}}</h2>
    <!-- 使用过滤器filters实现，方法后面不带()，
          默认会调用并且将管道符前面的参数传递给filters的方法，返回调用后的结果 -->
    <h2>现在是：{{time | filFmtTime}}</h2>
    <!--使用过滤器filters实现，传递参数  -->
    <h2>现在是：{{time | filFmtTime('YYYY/MM/DD HH:mm:ss') | timeSlice}}</h2>

    <h2 :name="time | filFmtTime">v-bind:属性 = "xxx | 过滤器名"</h2>

  </div>


  <script type='text/javascript'>
    Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
    // 获取时间戳
    const time = Date.now()

    //必须在创建 Vue 实例之前全局定义过滤器：
    Vue.filter('filFmtTime', (value, str = 'YYYY-MM-DD HH:mm:ss') => {
      return dayjs(value).format(str)
    })

    // 创建一个Vue实例
    const vm = new Vue({
      el: '#root',
      data: {
        time
      },
      computed: {
        formatTime () {
          //format()不传参数则默认格式化为国际标准时间2022-07-23T15:44:30+08:00
          return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      methods: {
        getFormatTime () {
          return dayjs(this.time).format('YYYY年MM月DD日 HH时mm分ss秒')
        }
      },
      //局部过滤器
      filters: {
        // filFmtTime (value, str = 'YYYY-MM-DD HH:mm:ss') {
        //   return dayjs(value).format(str)
        // },
        timeSlice (value) {
          return value.slice(0, 10)
        }
      }

    });

  </script>

</body>

</html>